<template>
  <!-- 司机管理页面 -->
  <div class="app-container">
    <!-- 上方筛选区域 -->
    <el-card class="box-card search-card-box">
      <el-form ref="form" label-width="100px" label-position="right">
        <el-row :gutter="20">
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
            <el-form-item label="司机账号" style="margin-bottom: 0px;">
              <el-input v-model="formInline.account" placeholder="请输入司机账号" />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
            <el-form-item label="司机姓名">
              <el-input v-model="formInline.name" placeholder="请输入司机姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
            <el-form-item label="司机手机号">
              <el-input v-model="formInline.phone" placeholder="请输入司机手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
            <el-form-item label="所属机构" style="margin-top: 20px;">
              <treeselect v-model="formInline.agentId" :options="options" :normalizer="normalize" placeholder="请选择所属机构" />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px; margin-top: 20px; ">
            <el-button type="primary" @click="searchFn">搜索</el-button>
            <el-button @click="resetFn">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 下方表格区域 -->
    <el-card class="box-card table-card-box" style="margin-top: 20px;">
      <!-- 表格区域 -->
      <el-table
        v-loading="isLoading"
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="120"
        />
        <el-table-column
          prop="account"
          label="司机账号"
          width="120"
        />
        <el-table-column
          prop="name"
          label="司机姓名"
          width="120"
        />
        <el-table-column
          prop="mobile"
          label="司机电话"
          width="120"
        />
        <el-table-column
          prop="truck.licensePlate"
          label="关联车辆"
          width="120"
        />
        <el-table-column
          prop="agency.name"
          label="所属机构"
          width="120"
        />
        <el-table-column
          prop="workStatus"
          label="工作状态"
          width="300"
        >
          <template v-slot="{row}">
            <span v-if="row.workStatus" class="tableColumn-status">上班</span>
            <span v-else class="tableColumn-status stop-use">休息</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
        >
          <template v-slot="{row}">
            <el-button type="text" size="small" @click="$router.push(`driverdetails/${row.userId}`)">查看</el-button>
            <el-button type="text" size="small" @click="configureCar(row)">配置车辆</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="height: 60px; margin-top: 20px;" type="flex" justify="center">
        <el-pagination
          :current-page="formInline.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="changePageSize"
          @current-change="changePage"
        />
      </el-row>
    </el-card>
    <!-- dialog弹框 -->
    <el-dialog title="配置车辆" :visible="isShow" width="640px" @close="closeFn">
      <div class="header">
        <div class="num">
          <label for="">司机编号: </label>
          <span>{{ carData.userId }}</span>
        </div>
        <div class="name">
          <label for="">司机名称: </label>
          <span>{{ carData.name }}</span>
        </div>
        <div class="iphone">
          <label for="">司机电话: </label>
          <span>{{ carData.mobile }}</span>
        </div>
        <div class="agency">
          <label for="">所属机构: </label>
          <span>{{ carData.agency?.name }}</span>
        </div>
      </div>
      <div class="searchBox">
        <label> 配置车辆：</label>
        <el-select v-model="value" placeholder="请输入车牌号" @change="changeCar">
          <el-option v-for="item in stopCarList" :key="item.id" :label="item.licensePlate" :value="item.id" />
        </el-select>
      </div>
      <!-- 表格区域 -->
      <el-table
        style="width: 584px; margin: 0px auto;"
        stripe
        :data="carDataList"
      >
        <el-table-column
          prop="licensePlate"
          label="车牌号"
        />
        <el-table-column
          prop="status"
          label="车辆状态"
        >
          <template v-slot>
            <div v-if="carDataList[0].workStatus===1" class="tableColumn-status">启用</div>
            <div v-else-if="carDataList[0].workStatus===0" class="tableColumn-status stop-use">停用</div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template v-slot="{row}">
            <el-button type="text" size="small" @click="jumpCar(row)">查看</el-button>
            <el-button type="text" size="small" @click="delFn">删除</el-button>
          </template>
        </el-table-column>
        <!-- 表格没有数据时展示的内容 -->
        <template #empty>
          <div>
            <img src="https://slwl-admin.itheima.net/static/img/pic-kong.742d3899.png" alt="" style="margin-top: 20px;">
            <p style="margin-top: -20px; padding-bottom: 0px;">这里空空如也</p>
          </div>
        </template>
      </el-table>
      <div slot="footer" class="dialog-footer" style="text-align: center; padding-bottom: 20px;">
        <el-button type="primary" @click="isShow = false">确 定</el-button>
        <el-button @click="closeFn">取 消</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getDriverApi, getStopCarApi } from '@/api/courier'
import { getDepartTree } from '@/api/base'
export default {
  components: { Treeselect },
  data() {
    return {
      value: '',
      isLoading: true,
      total: 0,
      formInline: {
        page: 1, // 当前页
        pageSize: 10, // 每页的条目数
        account: '', // 司机编号
        agentId: null, // 机构ID
        name: '', // 司机名称
        phone: '', // 司机电话
        workStatus: '' // 工作状态
      },
      tableData: [],
      isShow: false,
      carData: {},
      stopCarList: [], // 停用车牌列表
      carDataList: [],
      options: []
    }
  },
  created() {
    this.initTable()
    this.getTree()
  },
  methods: {
    // 请求数据 渲染功能
    async  initTable() {
      this.isLoading = true
      const res = await getDriverApi(this.formInline)
      this.stopCarList = await getStopCarApi()
      // console.log(res)
      this.tableData = res.items
      this.total = Number(res.counts)
      // console.log(this.tableData)
      this.isLoading = false
      // console.log(this.tableData)
    },
    // 自定义键名
    normalize(node) {
      return {
        id: node.id, // 使用自定义键名 label
        label: node.name,
        children: node.children
      }
    },
    // 得到所属机构的树形结构
    async getTree() {
      const res = await getDepartTree()
      // console.log(JSON.parse(res))
      this.options = JSON.parse(res)
      // console.log(this.options)
    },
    // 搜索功能
    searchFn() {
      // console.log('submit!')
      this.initTable()
    },
    // 重置功能
    resetFn() {
      // 清空表单
      this.$refs.form.$el.reset()
      // 复原数据
      this.formInline = {
        page: 1,
        pageSize: 10,
        account: '',
        name: '',
        phone: '',
        agentId: null
      }
      // 发送渲染请求
      this.initTable()
    },
    // 配置车辆功能呢
    configureCar(row) {
      // console.log(row)
      this.$confirm(' <p style="margin-bottom: 9px; color: rgb(51, 41, 41);">配置车辆需满足以下条件:</p><span style=" width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); border-radius: 50%; display: inline-block; text-align: center; margin-right: 6px; line-height: 14px;">1</span> <span style="color: rgb(51, 41, 41);">司机信息已完善</span> <span style="width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); margin-left: 90px; border-radius: 50%; display: inline-block; text-align: center; line-height: 14px; margin-right: 6px;">2</span> <span style="color: rgb(51, 41, 41); margin-right: 22px;">司机已设置排班</span> <span style="width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); margin-top: 10px; border-radius: 50%; display: inline-block; text-align: center; line-height: 14px; margin-right: 6px;">3</span> <span style="color: rgb(51, 41, 41);">司机绑定车辆未在启用状态</span> ', '车辆配置', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.isShow = true
        this.carData = row
        // console.log(this.carData.truck)
        const rowData = {
          licensePlate: this.carData.truck.licensePlate,
          workStatus: this.carData.truck.workStatus,
          id: this.carData.truck.id
        }
        this.carDataList.push(rowData)
        this.value = this.carDataList[0].licensePlate
        // console.log(this.carDataList)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 分页功能 改变每页条数
    changePageSize(val) {
      // console.log(`每页 ${val} 条`)
      this.formInline.pageSize = val
      this.initTable()
    },
    // 分页功能,改变当前页码
    changePage(val) {
      // console.log(`当前页: ${val}`)
      this.formInline.page = val
      this.initTable()
    },
    // 关闭弹窗功能
    closeFn() {
      // 清空数组
      this.carDataList = []
      // 关闭弹窗
      this.isShow = false
    },
    // 改变单选框的值
    changeCar(id) {
      // console.log(id)
      // console.log(this.stopCarList)
      this.value = id
      this.carDataList = this.stopCarList.filter((item) => item.id === id)
      // console.log(this.carDataList)
    },
    // dialog里的删除功能
    delFn() {
      this.carDataList = []
      this.value = ''
    },
    // 跳转到车辆详情页面
    jumpCar(row) {
      // console.log(row)
      this.$router.push(`/car/carDetails/${row.id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-card{
  overflow: visible;
}

::v-deep .el-dialog {
  border-radius: 8px;
}
::v-deep .el-dialog__header {
  padding: 15px 30px 15px;
  background-color: #f3f4f7;
  border-radius: 8px 8px 0 0;
}

  .app-container {
  .search-card-box{
    .el-col{
     ::v-deep .el-form-item__label{
        color: #20232a;
        font-weight: 400;
        text-align: right;
        padding-left: 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        white-space: nowrap;
      }
    }

    .el-input{
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: 100%;
    }
    .el-form-item{
      margin-bottom: 0;

    }
    .el-button{
      width: 90px;
      height: 40px;
      padding: 10px 20px!important;
      border-radius: 5px!important;
      font-weight: 400;
    }
  }
}
.header{
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  width: 584px;
  height: 90px;
  background-color: #fbfafa;
  flex-wrap: wrap;
  padding: 21px 52px;
  margin: 0 10px;
  margin-top: -10px;
  div{
    flex: 40%;
  }
   label{
    width: 71px;
    height: 20px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 14px;
    color: #20232a;
    letter-spacing: .16px;
    text-align: right;
    }
    span{
    color: #818693;
    font-size: 14px;
    }
   .num .name {
    margin-bottom: 14px;
  }
  .num .iphone{
    flex:60%;
  }
  .name .agency{
    flex:1;
  }

}
.searchBox{
  width: 584px;
  margin: 0 auto;
  margin-top: 19px;
  margin-bottom: 20px;
}
.footer{
  width: 584px;
  padding: 10px 20px 20px;
  text-align: right;
  box-sizing: border-box;
}
.tableColumn-status:before {
    width: 6px;
    height: 6px;
    background: #1dc779;
    border-radius: 50%;
    content: "";
    display: inline-block;
    margin-right: 6px;
    }
    .stop-use:before {
    background-color: #e15536;
}

</style>
